import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const Music = () => import("../pages/Music.vue");
const News = () => import("../pages/News.vue");
/* 
  Vue的导航守卫:
    - 全局导航守卫(设置给router,对所有的路由跳转都生效)
      - 全局前置守卫(router.beforeEach 注册一个全局前置守卫)
      - 全局解析守卫(router.beforeResolve 注册一个全局解析守卫)
      - 全局后置钩子(router.afterEach 注册一个全局后置钩子)

    - 路由独享守卫(设置给某个路由规则,只要跳转当前路由即可生效)
      - 使用beforeEnter进行注册

    - 组件内守卫(在组件内部定义的守卫,此时已经进入到该组件内部了)
      - beforeRouteEnter:当前组件被路由切换后,进入组件就会被触发(没有this,但是next方法可以接受一个回调函数,回调函数内部可以访问this)
      - beforeRouteUpdate:在当前路由改变，但是该组件被复用时调用(比如params参数修改)
      - beforeRouteLeave:导航离开该组件的对应路由时调用

  Vue的导航守卫执行顺序:
    - 用户触发了路由导航
    - 在失活的组件里调用 beforeRouteLeave 守卫
    - 调用全局的 beforeEach 守卫
    - 如果是重用组件,在重用的组件里调用 beforeRouteUpdate 守卫 
    - 在路由配置里调用 beforeEnter
    - 解析异步路由组件
    - 在被激活的组件里调用 beforeRouteEnter
    - 调用全局的 beforeResolve 守卫
    - 导航被确认
    - 调用全局的 afterEach 钩子
    - 触发 DOM 更新

  

*/
const router = new VueRouter({
  mode: "history",
  routes: [
    { path: "/music", component: Music },
    {
      path: "/news/:id",
      component: News,
      beforeEnter(to, from, next) {
        console.log("beforeEnter 路由独享守卫");

        next();
      },
    },
  ],
});

router.beforeEach((to, from, next) => {
  console.log("beforeEach 全局前置守卫");
  next();
});

router.beforeResolve((to, from, next) => {
  console.log("beforeResolve,全局解析守卫");

  next();
});

router.afterEach(() => {
  console.log("afterEach 全局后置钩子");
})

export default router;
